<template>
  <view class="uni-numbox">
    <view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="_calcValue('subtract')">
      <view class="iconfont icon-subtract"></view>
      <!-- <image class="icon-add-image" src="../../../static/img/jian.png"></image> -->
    </view>
    <input class="uni-numbox-value" type="number" :disabled="disabled" :value="inputValue" @input="_onBlur">
    <text class="uni-numbox-unit">{{unit}}</text>
    <view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="_calcValue('add')">
      <view class="iconfont icon-add"></view>
      <!-- <image class="icon-subtract-image" src="../../../static/img/add.png"></image> -->
    </view>
  </view>
</template>
<script>
  export default {
    name: 'uni-number-box',
    props: {
      value: {
        type: Number,
        default: 0
      },
      min: {
        type: Number,
        default: -Infinity
      },
      max: {
        type: Number,
        default: Infinity
      },
      step: {
        type: Number,
        default: 1
      },
      disabled: {
        type: Boolean,
        default: false
      },
      unit: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        inputValue: this.value
      }
    },
    computed: {
      disableSubtract() {
        return this.value <= this.min
      },
      disableAdd() {
        return this.value >= this.max
      }
    },
    watch: {
      value(val) {
        this.inputValue = val;
      },
      inputValue(val) {
        this.$emit('change', val);
      }
    },
    methods: {
      _calcValue(type) {
        const scale = this._getDecimalScale();
        let value = this.inputValue * scale;
        let step = this.step * scale;

        if (type === 'subtract') {
          value -= step
        } else if (type === 'add') {
          value += step
        }
        if (value < this.min || value > this.max) {
          return
        }
        this.inputValue = value / scale;
      },
      _getDecimalScale() {
        let scale = 1;
        // 浮点型
        if (~~this.step !== this.step) {
          scale = Math.pow(10, (this.step + '').split('.')[1].length);
        }
        return scale;
      },
      _onBlur(event) {
        let value = event.detail.value;
        if (!value) {
          this.inputValue = 0;
          return
        }
        value = +value;
        if (value > this.max) {
          value = this.max;
        } else if (value < this.min) {
          value = this.min
        }
        this.inputValue = value
      }
    }
  }
</script>
<style lang="less">
  @import "../../../static/font/iconfont.css";

  .uni-numbox {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 60upx;
    width: 320upx;
    // box-sizing: border-box;
    border-radius: 4upx;
    border: 1upx solid #DEDEDE;
    margin-top: 40upx;

    &.active {
      border: 1upx solid #DEDEDE;
    }
  }

  .uni-numbox-minus,
  .uni-numbox-plus {
    margin: 0;
    background-color: #FFFFFF;
    width: 65upx;
    height: 58upx;
    line-height: 58upx;
    text-align: center;
    color: rgb(57, 117, 215);
    display: flex;
    align-items: center;
    justify-content: center;

    .iconfont {
      font-size: 25upx;
      height: 58upx;
      line-height: 58upx;
      width: 65upx;
      text-align: center;
    }

    .icon-subtract-image,
    .icon-add-image {
      display: block;
      width: 35upx;
      height: 35upx;
    }
  }

  .uni-numbox-minus {
    border-right: 1upx solid rgb(48, 48, 77);
    border-radius: 4upx 0 0 4upx;
  }

  .uni-numbox-plus {
    border-left: 1upx solid rgb(48, 48, 77);
    border-radius: 0 4upx 4upx 0;
  }

  .uni-numbox-value {
    background-color: #fff;
    flex: 1;
    height: 58upx;
    text-align: left;
    padding: 0 20upx;
    box-sizing: border-box;
    line-height: 58upx;
    font-size: 24upx;
    color: rgb(156, 160, 200);
  }

  .uni-numbox-disabled {
    /* color: #666; */
    color: rgb(57, 117, 215);
  }

  .uni-numbox-unit {
    background-color: #fff;
    height: 58upx;
    line-height: 58upx;
    font-size: 24upx;
    color: rgb(97, 100, 135);
    width: 88upx;
    text-align: center;
  }
</style>
